<template>
  <!-- 前端主页面 -->
  <div class="main">
    <el-container>
      <el-header>
        <Header v-if="refresh"></Header>
      </el-header>
      <el-main>
        <!-- <Home></Home> -->
        <router-view @call-father="refreshComp"></router-view>
      </el-main>
     
    </el-container>
  </div>
</template>

<script>
import Header from './header.vue'
// import Home from '../front/home.vue'
// import Footer from '../../components/footer.vue'
export default {
  components: {
    Header,
    // Footer,
    // Home
  },
  props: {},
  data() {
    return {
      refresh: true
    };
  },
  watch: {},
  computed: {},
  methods: {
    refreshComp() {
      // 移除组件
      this.refresh = false
      // 在组件移除后，重新渲染组件
      // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
      this.$nextTick(() => {
        this.refresh = true
      })
    },
  },
  created() {},
  mounted() {
  },
};
</script>
<style scoped>
/* .main {
  width: 100%;
  height: 100%;
} */
*{
  margin: 0;
  padding: 0;
}
.el-main {
  /* overflow: hidden; */
  /* height: 100%; */
  padding: 0px;
  /* height: 100vh; */
}

</style>